<template>
  <div ref="dom" class="charts chart-pie" style="background-color: #f6f7fb"></div>
</template>

<script>
import echarts from "echarts";
import tdTheme from "./theme.json";
import { on, off } from "@/libs/tools";
// echarts.registerTheme("tdTheme", tdTheme);
export default {
  name: "Chartpiem",
  props: {
    value: Object,
    text: String,
    subtext: String,
    series: Array,
    clickTag: String,
    xAxisData: Array,
    seriesData: Array,
    grid: Object,
    legend: Object,
    tooltip: Object,
    legendData: Array,
    seriesName: String,
    color: {
      type: Array,
      default: () => {
        return ["#2f83e4"];
      },
    },
  },
  data() {
    return {
      dom: null,
    };
  },
  watch: {
    value: {
      deep: true,
      handler(val) {
        this.intChart();
      },
    },
    text: {
      deep: true,
      handler(val) {
        this.intChart();
      },
    },
    series: {
      deep: true,
      handler(val) {
        this.intChart();
      },
    },
  },
  methods: {
    resize() {
      this.dom.resize();
    },
    handlerData(series, option) {
      console.log(series)
      var len
      if(series){
        len = series.length;
      }
      if (len > 6) {
        let j;
        if (len == 7) {
          j = 6;
        }
        if (len == 8) {
          j = 7;
        }
        for (let i = 0; i < len; i++) {
          option.title[i + 1] = {
            text: "{pp|" + series[i].text + "}",
            left: i < 4 ? i*25 + 9 + "%" : (j - i) * 25 + 9 + "%",
            y: i < 4 ? "55%" : "95%",
            textStyle: {
              fontSize: 15,
              rich: {
                pp: {
                  fontWeight: "bold",
                  fontSize: 15,
                  width: "9",
                  align: "center",
                },
              },
            },
            itemGap: 200,
          };
          option.series[i] = {
            name: series[i].text,
            type: "pie",
            center:
              i < 4
                ? [i*25 + 13 + "%", "40%"]
                : [(j - i) * 25 + 13 + "%", "80%"],
            radius: [0, "25%"],
            label: {
              formatter: params=>{

                if (params.percent<10){
                  params.data.label = {position: 'outside'}
                  params.data.labelLine = {show:true}
                }
                return params.name + '\n' + params.percent + '%'
              },
              position: "inside",
            },
            labelLine: {
              show: false,
            },
            data: series[i].data,
          };
          console.log(j);
        }
      }
      if (len == 4) {
        for (let i = 0; i < len; i++) {
          option.title[i + 1] = {
            // text: series[i].text,
            text: "{pp|" + series[i].text + "}",
            left: i*25 + 9 + "%",
            // left: '50%',
            y: "70%",
            textStyle: {
              fontSize: 15,
              rich: {
                pp: {
                  fontWeight: "bold",
                  fontSize: 15,
                  width: "9",
                  align: "center",
                },
              },
            },
            itemGap: 200,
          };
          option.series[i] = {
              name: series[i].text,
              type: "pie",
              center: [i*25 + 13 + "%", "50%"],
              radius: [0, "25%"],
              label: {
                formatter: params=>{
                  if (params.percent<10){
                    params.data.label = {position: 'outside'}
                    params.data.labelLine = {show:true}
                  }
                  return params.name + '\n' + params.percent + '%'
                },
                position: "inside",
              },
              labelLine: {
                show: false,
              },
              data: series[i].data,
            }
        }
      }
      if (len == 3) {
        for (let i = 0; i < len; i++) {
          option.title[i + 1] = {
            // text: series[i].text,
            text: "{pp|" + series[i].text + "}",
            left: (i + 1) * 24 - 4 + "%",
            // left: '50%',
            y: "70%",
            textStyle: {
              fontSize: 15,
              rich: {
                pp: {
                  fontWeight: "bold",
                  fontSize: 15,
                  width: "9",
                  align: "center",
                },
              },
            },
            itemGap: 200,
          };
          option.series[i] = {
            name: series[i].text,
            type: "pie",
            center: [(i + 1) * 24 + "%", "50%"],
            radius: [0, "25%"],
            label: {
              formatter: function(params){
                // if (params.percent<10){
                //   params.data.label = {position: 'outside'}
                //   params.data.labelLine = {show:true}
                // }
                // if(params.percent>=10) {
                //   params.data.label = {position: 'inside'}
                //    params.data.labelLine = {show:false}
                // }
                return params.name + '\n' + params.percent + '%'
              },
              position: "inside",
            },
            labelLine: {
              show: false,
            },
            data: series[i].data,
          };
        }
      }
      if (len == 1) {
        for (let i = 0; i < len; i++) {
          option.title[i + 1] = {
            // text: series[i].text,
            text: "{pp|" + series[i].text + "}",
            left: (i + 1) * 50 - 4 + "%",
            // left: '50%',
            y: "70%",
            textStyle: {
              fontSize: 15,
              rich: {
                pp: {
                  fontWeight: "bold",
                  fontSize: 15,
                  width: "9",
                  align: "center",
                },
              },
            },
            itemGap: 200,
          };
          option.series[i] = {
            name: series[i].text,
            type: "pie",
            center: [(i + 1) * 50 + "%", "50%"],
            radius: [0, "25%"],
            label: {
              formatter: params=>{

                if (params.percent<10){
                  params.data.label = {position: 'outside'}
                  params.data.labelLine = {show:true}
                }
                return params.name + '\n' + params.percent + '%'
              },
              position: "inside",
            },
            labelLine: {
              show: false,
            },
            data: series[i].data,
          };
        }
      }
      if (len == 2) {
        for (let i = 0; i < len; i++) {
          option.title[i + 1] = {
            // text: series[i].text,
            text: "{pp|" + series[i].text + "}",
            left: (i + 1) * 32 - 4 + "%",
            // left: '50%',
            y: "70%",
            textStyle: {
              fontSize: 15,
              rich: {
                pp: {
                  fontWeight: "bold",
                  fontSize: 15,
                  width: "9",
                  align: "center",
                },
              },
            },
            itemGap: 200,
          };
          option.series[i] = {
            name: series[i].text,
            type: "pie",
            center: [(i + 1) * 32 + "%", "50%"],
            radius: [0, "25%"],
            label: {
              formatter: params=>{
                //
                if (params.percent<10){
                  params.data.label = {position: 'outside'}
                  params.data.labelLine = {show:true}
                }
                return params.name + '\n' + params.percent + '%'
              },
              position: "inside",
            },
            labelLine: {
              show: false,
            },
            data: series[i].data,
          };
        }
      }
      if (len == 5 || len == 6) {
        let j = 3;
        for (let i = 0; i < len; i++) {
          option.title[i + 1] = {
            // text: series[i].text,
            text: "{pp|" + series[i].text + "}",
            left: i < 3 ? (i + 1) * 24 - 4 + "%" : (i - j + 1) * 24 - 4 + "%",
            // left: '50%',
            y: i < 3 ? "55%" : "95%",
            textStyle: {
              fontSize: 15,
              rich: {
                pp: {
                  fontWeight: "bold",
                  fontSize: 15,
                  width: "9",
                  align: "center",
                },
              },
            },
            itemGap: 200,
          };

          option.series[i] = {
            name: series[i].text,
            type: "pie",
            center:
              i < 3
                ? [(i + 1) * 24 + "%", "40%"]
                : [(i - j + 1) * 24 + "%", "80%"],
            radius: [0, "25%"],
            label: {
              formatter: params=>{
                if (params.percent<10){
                  params.data.label = {position: 'outside'}
                  params.data.labelLine = {show:true}
                }
                return params.name + '\n' + params.percent + '%'
              },
              position: "inside",
            },
            labelLine: {
              show: false,
            },
            data: series[i].data,
          };
          // j++
          console.log(j);
        }
      }
      return option;
      console.log(option);
    },
    intChart() {
      var that = this;
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.showLoading({
        text: 'loading',
        color: '#2D8CF0',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.2)',
        zlevel: 0,
      })
      this.$nextTick(() => {
        let value = that.value.series;
        let option = {
          title: [
            {
              left: "center",
              y: "10%",
              textStyle: {
                color: "#000",
                fontSize: 26,
              },
              text: this.text,
            },
          ],
          color:[
            "#FFC75C",
            "#F3775E",
            "#5383FF",
            "#74D8C9",
            "#AC88FD",
            "#59C692",
            "#FF617F",
            "#3C58BC",
            "#5CD5F5",
            "#7C84FF",
            "#c4ccd3"
          ],
          notMerge: true,
          tooltip: {
            trigger: "item",
            formatter: "{a}<br/>{b}:{c}({d}%)",
          },
          toolbox: {
            show: true,
            orient: "vertical",
            y: "center",
            right: "10px",
            feature: {
              make: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          series: [],
        };
        option = this.handlerData(value,option)
        setTimeout(() => {
          // setOption前隐藏loading事件
          this.dom.hideLoading();
          this.dom.setOption(option, true)
        }, 1000);
        on(window, "resize", this.resize);
      });
    },
  },
  mounted() {
    this.intChart();
  },
  beforeDestroy() {
    off(window, "resize", this.resize);
  },
};
</script>
